<template>
  <div>
    <v-chart 
      class="chart" 
      :option="option" 
    />
  </div>
</template>
<script setup lang="ts">
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";
import "echarts";
// import echarts from "@/utils/echartsRequire";
// import { PieChart } from "echarts/charts";
// echarts.use([PieChart]);

provide(THEME_KEY, "dark");

const option = ref({
  title: {
    text: "2023报考推荐专业类别",
    left: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    left: "left",
    data: ["软件工程", "电子通信", "电气新能源", "汉语言学", "公费师范", "法学", "临床八年", "口腔医学", "应用经济学", "数学"]
  },
  series: [
    {
      name: "推荐专业类别",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      data: [
        { value: 735, name: "软件工程" },
        { value: 610, name: "电子通信" },
        { value: 534, name: "电气新能源" },
        { value: 515, name: "汉语言学" },
        { value: 448, name: "公费师范" },
        { value: 248, name: "法学" },
        { value: 210, name: "临床八年" },
        { value: 190, name: "口腔医学" },
        { value: 121, name: "应用经济学" },
        { value: 80, name: "数学" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
});
</script>
<style scoped>
.chart {
  height: 600px;
}
</style>
